@import "../../../assets/styles/variables.less";
.container1 {
  height: 100%;
}
.customer-input {
  background: #fff;
  height: 80rpx;
  border-radius: 40rpx;
  margin-bottom: 40rpx;
  padding: 0 37rpx;
}
.msg-item {
  height: 170rpx;
  position: relative;
  left:0;
  top:0;
  margin:0 40rpx;
  border-radius: 0px 8rpx 8rpx 8rpx;
  margin-bottom: 20rpx;
  transition: height .5s;
}
.hasheight{
  height: 350rpx;
}

.msg {
  position: absolute;
  width: 100%;
  height: 170rpx;
  left:0;
  top:0;
  border-radius: 70rpx 0px 0px 0px;
  z-index: 100;
  background-color: #FFF;
}

.header-img {
  position: absolute;
  width: 110rpx;
  height: 110rpx;
  left: 20rpx;
  top: 20rpx;
  border-radius: 10%;
}

.user-name {
  position: absolute;
  left: 150rpx;
  top: 20rpx;
}

.msg-text {
  position: absolute;
  left: 150rpx;
  bottom: 20rpx;
  font-size: 80%;
  color: rgb(127, 127, 127);
}

.msg-menu {
  position: absolute;
  width: 100%;
  height: 170rpx;
  left:0;
  top:0;
  z-index: 0;
}

.menu-delete {
  position: absolute;
  width: 148rpx;
  height: 170rpx;
  top:0rpx;
  right: 0;
  font-size: 30rpx;
  background-color: #F45E00;
  color:#FFF;
  text-align: center;
  line-height:170rpx;
}

.menu-mark {
  position: absolute;
  width: 200rpx;
  height: 148rpx;
  top:1rpx;
  right: 150rpx;
  background-color: rgb(200, 199, 205);
  color:#FFF;
  text-align: center;
  line-height:150rpx;
}
.task-customer {
  height: 170rpx;
  display: flex;
  padding: 30rpx 0 40rpx 0;
  .customer-img image {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50rpx;
    margin-right: 30rpx;
    margin-left: 32rpx;
  }
  .customer-name {
    height: 30rpx;
    font-size: 30rpx;
    font-weight: 500;
    color: #111111;
    line-height: 30rpx;
    margin-top:11rpx;
    .check-time {
      color: #999;
      font-size: 22rpx;
      float: right;
    }
  }
  .customer-tag {
    display: flex;
    justify-content: space-between;
    font-size: 22rpx;
    line-height: 22rpx;
    margin-top: 18rpx;
    .tag {
      background: #E8EDF7;
      border-radius: 20rpx;
      padding: 9rpx 20rpx;
      margin-right: 14rpx;
    }
  }
  .customer-check {
    font-size: 22rpx;
    color: #444444;
    margin-top: 18rpx;
    .check-name {
      color: @blue-font;
      display: inline;
    }
  }
  .icon{
    color: rgba(187, 187, 187, 1);
    font-size: 26rpx;
    transition: transform 0.3s;
    transform: rotate(0deg);
    position: absolute;
    right: 30rpx;
    top: 72rpx;
  }
  .rotate{
    transform: rotate(90deg);
  }
}
.task-progress {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  // padding-top: 30rpx;
  padding: 0 30rpx;
  background:#fff;
  position: absolute;
  top: 170rpx;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s;
  border-radius: 0 0 8rpx 8rpx;
  button.task-btn {
    width: 30%;
    height: 60rpx;
    line-height: 60rpx!important;
    border-radius: 8rpx;
    background: @blue-gradient;
    padding: 0;
    margin-bottom: 30rpx;
    font-size: 26rpx;
    color: #fff;
    &.disabled {
      opacity: 0.3;
    }
  }
}
.task-progress-active{
  max-height: 500rpx;
}